import React from 'react';
import {Menu,Button,Dropdown,Input,Row,Col,DatePicker,Table } from 'antd';
import { DownOutlined,UserOutlined,PlusOutlined,MinusOutlined  } from '@ant-design/icons';
import Moment from 'moment'
import './css/AddToDepot.css'

const { TextArea } = Input
const dateFormat = 'YYYY-MM-DD,hh:mm:ss a'
var today = Moment().subtract('1','day').format(dateFormat)

function handleMenuClick(e) {
    console.log('click', e);
}
function onChange(date, dateString) {
    console.log(date, dateString);
}
function onOk(value) {
    console.log('onOk: ', value);
}
const menu = (
    <Menu onClick={handleMenuClick}>
        <Menu.Item key="1" icon={<UserOutlined />}>
            1st menu item
        </Menu.Item>
        <Menu.Item key="2" icon={<UserOutlined />}>
            2nd menu item
        </Menu.Item>
        <Menu.Item key="3" icon={<UserOutlined />}>
            3rd item
        </Menu.Item>
    </Menu>
);
const menu1 = (
    <Menu onClick={handleMenuClick}>
        <Menu.Item key="1" icon={<UserOutlined />}>
            其他出库
        </Menu.Item>
        <Menu.Item key="2" icon={<UserOutlined />}>
            销售出库
        </Menu.Item>
    </Menu>
);
const pageNation = {
    hideOnSinglePage:true,
    pageSize:10,
    size:'small',
    total:7,
    backgroundColor:'#4BD0B6',
}
class App extends React.Component {
    constructor(){
        super()
        this.state = {
            data:[
                {key:1}
            ]
        }
    }
    addRow(){
        let num = this.state.data.length
        let id = this.state.data[num-1].key+1
        let data = {key:id}
        let newData = this.state.data
        newData.push(data)
        this.setState({
            data:[...newData]
        })
    }
    removeRow(obj){
        let data = this.state.data
        data.map((item,i)=>{
            if(item.key===obj.key&&data.length!==1){
                data.splice(i,1)
                data.map(j=>{
                    if(j.key>i){
                        j.key-=1
                    }
                })
            }
            return item
        })
        this.setState({
            data:[...data]
        })
    }
    columns = [
        {
            dataIndex: 'key',
            align:'center',
        },
        {
            align:'center',
            render:text=><span><PlusOutlined onClick={()=>this.addRow()} className='myAddIcon'/>
                            <MinusOutlined onClick={()=>this.removeRow(text)} style={{marginLeft:'5px',cursor:'pointer',display:this.state.data.length===1?'none':'inline-block'}} className='myAddIcon'/></span>
        },
        {
            title:'商品编码',
            dataIndex: 'goodsId',
            align:'center',
        },
        {
            title:'商品名称',
            dataIndex: 'goodsName',
            align:'center',
            render:text=><Dropdown overlay={menu}>
                <Button className='addToDepotBtn'>
                    <DownOutlined />
                </Button>
            </Dropdown>
        },
        {
            title:'商品规格',
            dataIndex: 'goodsType',
            align:'center',
            render:text=><Dropdown overlay={menu}>
                <Button className='addToDepotBtn'>
                    <DownOutlined />
                </Button>
            </Dropdown>
        },
        {
            title:'单位',
            dataIndex: 'goodsUnit',
            align:'center',
            render:text=><Dropdown overlay={menu}>
                <Button className='addToDepotBtn'>
                    <DownOutlined />
                </Button>
            </Dropdown>
        },
        {
            title:'采购数',
            dataIndex: 'goodsNum',
            align:'center',
            render:text => <Input/>
        },
        {
            title:'采购单价',
            dataIndex: 'goodsNote',
            align:'center',
            render:text => <Input/>
        },
        {
            title:'小计',
            dataIndex: 'goodsNote',
            align:'center',
            render:text => <Input/>
        },
    ]

    render() {
        return (
            <div>
                <Row>
                    <Col id='lCol'>
                        <span>*</span>
                        <span>供应商</span>
                        <Dropdown overlay={menu}>
                            <Button>
                                <DownOutlined />
                            </Button>
                        </Dropdown>
                    </Col>
                    <Col id='rCol'>
                        <span><span style={{color:'red',marginRight:'5px'}}>*</span>退货仓库</span>
                        <Dropdown overlay={menu1}>
                            <Button style={{textAlign:'right',width:'200px'}} className='inputAndBtn'>
                                <DownOutlined />
                            </Button>
                        </Dropdown>
                    </Col>
                </Row>
                <Row id='tableRow'>
                    <Col style={{width:'100%'}}>
                        <Table id='addToDepotTable' bordered={true} pagination={pageNation} columns={this.columns} dataSource={this.state.data}/>
                    </Col>
                </Row>
                <Row id='detailsRow'>
                    <Col id='myLeftCol' span={6}>
                        <div>
                            <span style={{textAlign:'center'}}><span>*</span>采购退货单号</span>
                            <Input className='inputAndBtn'/>
                        </div>
                        <div>
                            <span>出库日期</span>
                            <DatePicker
                                showTime
                                onChange={onChange}
                                onOk={onOk}
                                value={Moment(today,dateFormat)}
                            />
                        </div>
                        <div>
                            <span>经办人</span>
                            <Input className='inputAndBtn'/>
                        </div>
                    </Col>
                    <Col id='myRightCol' span={6}>
                        <div>
                            <span>备注</span>
                            <TextArea style={{width:'350px',marginLeft:'10px'}} rows={3} />
                        </div>
                        <div>
                            <span>制单人</span>
                            <Input placeholder='刘经理' disabled style={{width:'350px',marginLeft:'10px'}}/>
                        </div>
                    </Col>
                </Row>
                <Row id='bottomRow'>
                    <Col>
                        <Button>取消</Button>
                        <Button>保存</Button>
                    </Col>
                </Row>
            </div>
        );
    }
}

export default App;